<script lang="ts" setup>
import { PlusOutlined } from '@ant-design/icons-vue'
import { Modal } from 'ant-design-vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { createVNode } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

interface Props {
	editForm: any
	categoryTree: any
	searchedSuppliers: any[]
}

interface Emits {
	(e: 'supplier-search', val: string, id: number): void
	(e: 'on-load-category-tree', treeNode: any): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const conf = {
	maxKeyWordCount: 20,
	maxKeyWordLength: 50,
	longKeyWordTagLength: 20
}

const isKeyWordAdding = ref(false)

const delKeyword = (event: Event, index: number) => {
	event.preventDefault()
	Modal.confirm({
		title: t('商品详细.确认删除关键字?'),
		icon: createVNode(ExclamationCircleOutlined),
		onOk() {
			props.editForm.spu.keywords.splice(index, 1)
		}
	})
}

const addKeyword = (e: Event) => {
	const value = (e.target as HTMLInputElement).value
	if (value) {
		const keyword = value
		const keywords = props.editForm.spu.keywords
		if (keywords.includes(keyword)) {
			Api.notify(t('商品详细.关键字已存在'))
		} else {
			props.editForm.spu.keywords.push(keyword)
		}
	}
	isKeyWordAdding.value = false
}

const supplierSearch = (val: string = '', id: number = 0) => {
	emit('supplier-search', val, id)
}

const onLoadCategroyTree = (treeNode: any) => {
	return new Promise<void>(resolve => {
		emit('on-load-category-tree', treeNode)
		resolve()
	})
}
</script>

<template>
	<div class="bg-white rounded-lg shadow-sm p-6">
		<a-divider class="text-lg font-semibold mb-6">{{ t('商品详细.商品基础信息') }}</a-divider>
		<div class="spuOperate">
			<a-form
				ref="spuFormRef"
				name="spu"
				:model="editForm.spu"
				:label-col="{ span: 4 }"
				:wrapper-col="{ span: 16 }">
				<a-form-item
					v-if="editForm.id > 0 && editForm.copiedById == 0"
					:label="t('商品详细.商品编号')"
					:wrapper-col="{ span: 8 }">
					{{ editForm.spu.numbering }}
				</a-form-item>
				<a-form-item
					:label="t('商品详细.商品名')"
					name="name"
					:rules="[{ required: true, message: t('商品详细.请输入商品名！') }]"
					:wrapper-col="{ span: 8 }">
					<a-input
						v-model:value="editForm.spu.name"
						:placeholder="t('商品详细.请输入商品名')"></a-input>
				</a-form-item>
				<a-form-item
					:label="t('商品详细.商品分类')"
					name="categoryId"
					:rules="[{ required: true, message: t('商品详细.请选择商品类别！') }]"
					:wrapper-col="{ span: 8 }">
					<a-tree-select
						:placeholder="t('商品详细.请选择商品类别')"
						v-model:value="editForm.spu.categoryId"
						v-model:treeExpandedKeys="editForm.spu._categoryChainIds"
						:tree-data="categoryTree"
						:load-data="onLoadCategroyTree"
						tree-data-simple-mode></a-tree-select>
				</a-form-item>
				<a-form-item
					:label="t('商品详细.供应商')"
					name="supplierId"
					:extra="t('商品详细.使用手机号或名称筛选')"
					:rules="[
						{
							required: !(
								editForm.spu.createdByUser > 0 && editForm.spu.isSecondHand
							),
							message: t('商品详细.请选择供应商！')
						}
					]"
					:wrapper-col="{ span: 8 }">
					<a-select
						:placeholder="t('商品详细.请输入供应商')"
						v-model:value="editForm.spu.supplierId"
						:default-active-first-option="false"
						:filter-option="false"
						:not-found-content="null"
						:options="searchedSuppliers"
						@search="supplierSearch"
						show-search></a-select>
				</a-form-item>
				<a-form-item
					:label="t('商品详细.虚拟商品')"
					name="isVirtual"
					:wrapper-col="{ span: 4 }">
					<a-switch v-model:checked="editForm.spu.isVirtual"></a-switch>
				</a-form-item>
				<a-form-item
					:label="t('商品详细.二手商品')"
					name="isSecondHand"
					:wrapper-col="{ span: 4 }">
					<a-switch v-model:checked="editForm.spu.isSecondHand"></a-switch>
				</a-form-item>
				<a-form-item
					:label="t('商品详细.搜索关键字')"
					name="keywords"
					:extra="
						t('商品详细.关键字限制提示', {
							maxKeyWordCount: conf.maxKeyWordCount,
							maxKeyWordLength: conf.maxKeyWordLength
						})
					"
					:wrapper-col="{ span: 8 }">
					<template v-for="(keyword, index) in editForm.spu.keywords" :key="index">
						<a-tooltip
							v-if="keyword.length >= conf.longKeyWordTagLength"
							:title="keyword">
							<a-tag :closable="true" @close="delKeyword($event, index)">
								{{ `${keyword.slice(0, conf.longKeyWordTagLength)}...` }}
							</a-tag>
						</a-tooltip>
						<a-tag v-else :closable="true" @close="delKeyword($event, index)">
							{{ keyword }}
						</a-tag>
					</template>
					<div v-if="editForm.spu.keywords.length < conf.maxKeyWordCount">
						<a-input
							:maxlength="conf.maxKeyWordLength"
							v-if="isKeyWordAdding"
							ref="inputRef"
							type="text"
							size="small"
							:style="{ width: '78px' }"
							@blur="addKeyword" />
						<a-tag
							v-else
							color="blue"
							style="background: #fff; border-style: dashed"
							@click="isKeyWordAdding = true">
							<plus-outlined />
							{{ t('商品详细.新建') }}
						</a-tag>
					</div>
				</a-form-item>
			</a-form>
		</div>
	</div>
</template>

<style lang="scss" scoped></style>
